<template>
  <BasicModal
    :visible="visible"
    :title="title"
    :min-height="80"
    :height="80"
    :show-ok-btn="true"
    :show-cancel-btn="true"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form ref="form" :model="formData">
      <a-form-item label="上级" name="parentName" :rules="[{ required: true }]">
        <div style="display: flex">
          <a-input v-model:value="formData.parentName" style="flex: 1" disabled />
          <a-button type="dashed" @click="handleSelectParent" style="margin-left: 10px">
            <SelectOutlined />
            Select parent
          </a-button>
        </div>
      </a-form-item>
    </a-form>
  </BasicModal>

  <template v-if="showSelect">
    <ModuleSelectModal
      :visible="showSelect"
      :selected-key="selectedKey"
      @ok="onSelectOk"
      @cancel="onSelectCancel"
    />
  </template>
</template>

<script>
  import { Form, FormItem, Input } from 'ant-design-vue'
  import { BasicModal } from '/@/components/Modal'
  import { useModuleStoreWithOut } from '/@/store/modules/module'
  import ModuleSelectModal from './ModuleSelectModal.vue'
  import { SelectOutlined } from '@ant-design/icons-vue'

  export default {
    components: {
      'a-input': Input,
      'a-form': Form,
      'a-form-item': FormItem,
      BasicModal,
      ModuleSelectModal,
      SelectOutlined,
    },
    props: {
      visible: Boolean,
      title: String,
    },
    emits: ['ok', 'cancel'],
    data: function () {
      return {
        store: useModuleStoreWithOut(),
        showSelect: false,
        selectedKey: 0,
        formData: {
          parentId: 0,
          parentName: '',
        },
      }
    },
    methods: {
      handleCancel() {
        this.$emit('cancel')
      },
      handleOk() {
        this.$refs.form
          .validate()
          .then(() => {
            this.$emit('ok', this.formData)
          })
          .catch((error) => {
            console.log('error', error)
          })
      },
      handleSelectParent() {
        this.showSelect = true
      },
      onSelectOk(data) {
        this.formData.parentId = data.key
        this.formData.parentName = data.title
        this.showSelect = false
      },
      onSelectCancel() {
        this.showSelect = false
      },
    },
  }
</script>
